<template>
  <footer class="footer">
    <div :style="`${lineWidth}`" class="footer-line"></div>
    <ul>
      <li @click="myToggle(2)">
        <router-link to="/home/topping"
          ><img src="../assets/images/bt-1.png" alt=""
        /></router-link>
      </li>
      <li @click="myToggle(4)">
        <router-link to="/home/timeline"
          ><img src="../assets/images/bt-2.png" alt=""
        /></router-link>
      </li>
      <li @click="myToggle(6)">
        <button @click="mySend">+</button>
      </li>
      <li @click="myToggle(8)">
        <router-link to="/home/lookbroad"
          ><img src="../assets/images/bt-4.png" alt=""
        /></router-link>
      </li>
      <li @click="myToggle(10)">
        <router-link to="/home/user"
          ><img src="../assets/images/bt-3.png" alt=""
        /></router-link>
      </li>
    </ul>
  </footer>
</template>

<script>
export default {
  name: "AppFooter",
  data() {
    return {
      index: 0,
      lineWidth: "width:20%;",
    };
  },
  methods: {
    myToggle(i) {
      this.index = i;
      this.lineWidth = "width:" + this.index + "0%;";
    },
    mySend() {
      let show = true;
      this.$emit("my-click", show);
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  height: 70px;
  border-top: 2px solid #ccc;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  z-index: 1000;
  box-sizing: border-box;
  .footer-line {
    width: 40%;
    height: 2px;
    position: absolute;
    top: -2px;
    left: 0;
    background-color: #f88a14;
  }
  ul {
    height: 70px;
    display: flex;
    li {
      flex-grow: 1;
      flex-shrink: 0;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        height: 30px;
      }
      button {
        display: block;
        background-color: #000;
        color: white;
        font-size: 28px;
        padding: 0 15px;
        text-align: center;
        border-radius: 15px;
        margin-left: -5px;
        margin-top: -2px;
      }
    }
  }
}
</style>